<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1
    {
        font-size: 50px;
        /*
        text-decoration 设置文本修饰
        可选值 第二个值设置颜色 第三个值设置划线样式 
        none 默认值 什么都没有
        underline 下划线
        line-through 删除线
        overline 上划线
        */
        /*text-decoration: overline red dotted;*/
    }
    .box2
    {
        /*
        white-space 设置网页如何处理空白
        可选值
        normal 正常情况
        nowrap 不换行
        pre 保留空白（保留所写的原格式）
        */
        white-space: nowrap;/*不换行*/
        overflow: hidden;/*超出边框的进行裁剪*/
        width: 200px;/*在不换行，超出边框进行裁剪后，设置宽度*/
        /*
        如果不设置不换行，那么就会在指定宽度的区域内进行换行
        设置了不换行后，那么多出来的内容会被直接裁剪，除非加大内容区域
        */
        text-overflow: ellipsis;/*溢出的内容会显示为省略号*/
        /*上个四个属性是设置省略号的必要属性*/
    }
    </style>
</head>
<body>
    <div class="box2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint ad vero saepe aut, veniam maiores enim omnis illo eveniet vitae voluptatibus aspernatur, velit ratione architecto voluptate inventore ex ipsum rem!
    </div>
    <div class="box1">
        今天天气真不错
    </div>
</body>
</html>